<template>
  <button class="btn btn-primary" v-if="type === 'primary'">
    <slot></slot>
  </button>
  <button class="btn btn-secondary" v-else-if="type === 'success'">
    <i class="iconfont icon-kaishi1"></i>
    <slot></slot>
  </button>
  <button class="btn btn-warning" v-else-if="type === 'warning'">
    <i class="iconfont icon-zanting"></i>
    <slot></slot>
  </button>
  <button class="btn btn-danger" v-else-if="type === 'danger'">
    <i class="iconfont icon-shanchu"></i>
    <slot></slot>
  </button>
  <button class="btn btn-info" v-else-if="type === 'info'">
    <slot></slot>
  </button>
</template>
<script setup lang="ts">
defineProps({
  type: {
    type: String,
    required: true,
    default: 'primary' as 'info' | 'success' | 'warning' | 'danger' | 'primary',
  },
})
</script>
